<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>" />
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
		<title>tueye发表文章-tueye发表文章-tueye专业的图片欣赏交流社区</title>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
		<meta http-equiv="description" content="This is my page" /> 
		
		<link href="<%=path%>/themes/css/popStyles.css" rel="stylesheet" type="text/css" />	
<link href="<%=path %>/themes/css/index.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="<%=path%>/script/PopBox.js"></script>
		<script type="text/javascript" src="<%=path%>/script/tueyeutiljs.js"></script>
		<script type="text/javascript" src="<%=path%>/script/jquery.js"></script>
		<script type="text/javascript"
			src="<%=path%>/script/ajaxfileupload.js"></script>
		<style type="text/css">
#publishtable {
	font-size: 12px;
}
.redColor {
	color: #cccc;
	margin: 10px;
}
#mainbody,#tip {
	text-align: left;
}
#mtable {
	width: 800px;
	height: auto;
}

#mtable table {
	width: 780px;
	line-height: 30px;
	height: 150px;
}
#tip {
	overflow: hidden;
	width: 500px;
	height: 75px;
	border: 1px dotted #FF5131;
	background-color: #FFFFE5;
	padding: 4px;
	color: #958895;
}
#mainbody h1 {
	border-bottom: 2px solid #FF5131;
	font-size: 16px;
}
#guan {
	position: relative;
	top: 0px;
	right: -480px;
	display: inline;
}
.addit {
	width: 80px;
	height: 30px;
	border: 1px solid #958895;
	background-color: white;
	font-size: 14px;
	color: #cccc;
	CURSOR: hand;
}
.addit_over {
	width: 80px;
	height: 30px;
	border: 1px solid white;
	background-color: #6666CC;
	font-weight: bold;
	color: #FFFFFF;
	CURSOR: hand;
}
#mtable table tr th{
 border-bottom:1px solid red;
 width:70%; 
 height:auto;
 margin-bottom:3px;
}
</style>

<script type="text/javascript">
   var tr_id = 1;
   var filesuffertype =  new Array("gif","jpg","jpeg","png","bmp");
   function filetype(ftype){
    for(i in filesuffertype){ 
    	if(filesuffertype[i].toUpperCase() == ftype.toUpperCase()){
    		return true;    	
    	}
    }
    return false;
   }
   function checkImgForm(){ 
   	for(i=1; i<=tr_id; i++){ 
   	  if($('#imgname'+i).val() == "")
	  {
    	alert('第'+i+'个图片的名称不能为空！')
   	 	return false;
   	  }
   	  if($('#imgtext'+i).val() == "")
	  {
    	alert('第'+i+'个图片的描述不能为空！')
   	 	return false;
   	  } 
   	  if($('#topic_code').val() == "")
   	  {
   	   alert('验证码不能为空！')
   	 	return false;
   	  }
   	}
   	return ture;
   }
	function addtr(tdid){
	    tr_id++; 
		var str="<tr　id='tr1'><td> <table border='0' cellspacing='0' cellpadding='2' id='imgtable1'> "
		        +" <th colspan=3>第"+tr_id+"个图片</th>"
		        +"	 <tr> <td colspan=3> "
		        +" <div id='dd"+tr_id+"' style='display:none;'>设为主图：<input type='radio' name='mainpic' id='mainpic' value="+tr_id+" />"
		        +" <img id='show"+tr_id+"' src='' onload='javascript:DrawImage(this,600,400)' onclick=\"Pop(this,50,'PopBoxImageLarge');\" class=\"PopBoxImageLarge\" /></div> "
		        +"</td></tr>"
		        +"<tr><td width='10%'>上传文件：	</td><td width='40%'><input type='file' id='img"+tr_id+"' name='img"+tr_id+"' />"
				+" <input type='button' value='先传图片' onclick='ajaxFileUpload("+tr_id+")' /></td>	<td rowspan=2 >"
				+"<img id='loading"+tr_id+"' src='<%=path%>/themes/images/loading.gif' style='display:none;' /></td></tr>"
				+"<tr><td width='10%'>文件名称：</td>	<td width='40%'><input type='text'  name='imgname"+tr_id+"' id='imgname"+tr_id+"' /><input type='hidden' id='imgsuffer"+tr_id+"' name='imgsuffer"+tr_id+"' /></td></tr>"
				+"<tr><td width='10%'>文件描述：</td>	<td><textarea cols='35' rows='7'  name='imgtext"+tr_id+"' id='imgtext"+tr_id+"'></textarea></td>"
				+"</tr><tr><td colspan='2'><a id='href"+tr_id+"' href=\"javascript:deltable('href"+tr_id+"')\">删除</a>这个图片</td>"
				+"</tr></table></td></tr> ";
		         //alert(str);
		        $(str).appendTo("#mtable"); 
	   // $("#mtable").append($(str));
	}
     function ajaxFileUpload(id){
     var loadingid="loading"+id;
   
     var showid="show"+id;
     var imgid="img"+id;
     
     var filename = $('#'+imgid).val();
      
     var dd = filename.lastIndexOf(".");
    
     var filepostffix = filename.substring(dd+1, filename.length);
     if(filetype(filepostffix) == false){
     	alert("不支持此文件类型");
     	return;
     }
     $('#'+loadingid)
		.ajaxStart(function(){
			$('#'+loadingid).show();
		})
		.ajaxComplete(function(){
			$('#'+loadingid).hide();
		});
               $.ajaxFileUpload(
                   {
		                url:'upload_image.do?id='+id+'&topicid=${id}',            //需要链接到服务器地址
		                secureuri:false,
		                fileElementId:imgid,                        //文件选择框的id属性
		                dataType: 'json',                                     //服务器返回的格式，可以是json
		                success: function (data, status)            //相当于java中try语句块的用法
		                {      
		                 	var imgpath = "<%=path%>/temp/${id}"+"_"+id+"."+filepostffix;
		                 	  $('#imgsuffer'+id)[0].value=filepostffix;
		                     $('#'+showid).attr({src: imgpath, alt: '点击查看原图' });
		                    $('#'+showid).addClass('imgdd');　
		                    $('#'+showid).parent().show();
		                },
		                error: function (data, status, e)            //相当于java中catch语句块的用法
		                {
		                   　　	var imgpath = "<%=path%>/temp/${id}"+"_"+id+"."+filepostffix;
		                 	  
		                     $('#'+showid).attr({src: imgpath, alt: '点击查看原图' });
		                    $('#'+showid).addClass('imgdd');　
		                    $('#'+showid).parent().show();
		                }
            }       
               );
              
          }
          function refrash(){
	     	$('#imgId')[0].src+='?'+Math.floor(Math.random()*10);
		}
		function deltable(tdid){
		  $('#'+tdid).parent().parent().parent().parent().parent().remove();
		  tr_id--;
		}
</script>
<body><%@ include file="../../../../common/header.jsp" %>
<div id="container">
	<div id="mainbody">
				<h1>
					图片上传
				</h1>
				<div id="tip">
					<div id="guan">
						<img src="<%=path%>/themes/images/13.gif"
							onClick='javascript:$("#tip").hide(280);' />
					</div>
					<pre style="display: inline; line-height: 18px;">
提示:1.文件名称，就是你给图片起的名
      　 2.文件描述就是介绍关于这个图片的一些故事、你的感想、为什么喜欢它、
          　为什么推荐它....
       　3.点击图片可以查看图片的原图
</pre>
				</div>
				<form method="post" action="<%=path%>/imageform_process.do"
					enctype="multipart/form-data" onsubmit="return checkImgForm();">
					<input type="hidden" name="topicid" value="${id }" />
					<table id="mtable" border="0" cellspacing="0" cellpadding="2">
						<tr　id="tr1">　
							<td>
								<table border="0" cellspacing="0" cellpadding="2" id="imgtable1"> 
								<th colspan=3>第1个图片</th>
								<tr>
								<td colspan=3> 
								 <div id="dd" style="display:none;">设为主图：<input type="radio" name="mainpic" value="1" checked="checked" />
								 <img id="show1" src="" onload="javascript:DrawImage(this,600,400)"  onclick="Pop(this,50,'PopBoxImageLarge');" class="PopBoxImageLarge" /></div> 
								</td>
								</tr>
									<tr>
										<td width="10%">
											上传文件：
										</td>
										<td width="40%">
											<input type="file" id="img1" name="img1" />
											 <input type="button" value="先传图片" onclick="ajaxFileUpload(1)" />
											 
										</td>
										<td rowspan=2 >
										<img id="loading1" src="<%=path%>/themes/images/loading.gif" style="display:none;" />　
										</td>
									</tr>
									<tr>
										<td width="10%">文件名称：</td>
										<td width="40%"><input type="text"  name="imgname1" id="imgname1"/>
										 <input type="hidden" id="imgsuffer1" name="imgsuffer1"/>
										</td>　
									</tr>
									<tr>
										<td width="10%">文件描述：</td>
										<td ><textarea cols="35" rows="7"  name="imgtext1" id="imgtext1"></textarea></td>　
									</tr> 
									
								</table>
							</td>
						</tr> 
						
					</table> <br/>
 						 <input type="button" onclick="addtr(1)" value="增加上传"　 /><input type="submit" value="发布全部"/>
 						 
					
				</form>
				 
				<div id="result"></div> 
			</div>
		</div> 
		<%@ include file="../../../../common/footer.jsp" %>
	</body>
</html>
